<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="deacription" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <!-- 2 -->
       <div id="app">
            <h1>msg:{{msg}}</h1>
            <p>str:{{str}}</p>
            <p>num:{{num}}</p>
            <p>bool:{{bool}}</p>
            <p>un:{{un}}</p>
            <p>big:{{big}}</p>
            <p>syn:{{syn}}</p>
            <p>arr:{{arr}}</p>
            <p>obj:{{obj}}</p>
            <p>fun:{{fun}}</p>

            <p>姓名:{{obj.name}}</p>
            <p>年龄:{{obj.age}}</p>            
            <p>{{arr[2]}}</p>
            <p>{{fun()}}</p>

            <p>{{bool ? "ok" : "no"}}</p>
            <p>{{bool || "ok"}}</p>
       </div>
       <!-- 1： -->
       <script src="../js/vue.js"></script>
       <script>
         /*
        Vue提供了模板语法：
          1. 什么是模板？Vue 中的 HTML 代码            
          2. 什么是模板语法？Vue 给 HTML 提供了一些特殊语法。例如：{{ msg }}                        
          3. 有哪些模板语法：
            - 插值语法：
              名称：双大括号语法 / 双大括号表达式 / Mustache 语法
              作用：在 html 渲染 Vue 中的数据（渲染动态js数据）
              语法：
                {{ JS表达式 }}
            - 指令语法
      */
        /* 
            基本数据类型：String Number Boolean Null Undefined Bigint Synber
            引用数据类型：Array Object Function
        */
            // 3:
            const vm = new Vue({
                data:{
                    msg:"hello Vue",
                    str:"花儿为什么这样红",
                    num:12345,
                    bool:true,
                    un:undefined,
                    big:234n,
                    syn:Symbol(),
                    arr:[1,2,3,4],
                    obj:{
                        name:"lisa",
                        age:39,
                    },
                    fun:function(){
                        console.log("hello");
                        return 123;
                    }
                }
            });
            vm.$mount("#app");
       </script>
    </body>
</html>